@layout("/common/_container.html"){
<style>
    html{
        width:100%;
        overflow-x:hidden;
    }
    .weekdays,.days,.headerTop,.followFooter{
        display: flex;
    }
    .weekdays > li ,.days > li,.headerTop > div,.followFooter>div{
        flex: 1;
    }
    .month{
        text-align: center;
    }
    .followHeader{
        background: #2e4050;
        color: white;
        padding-bottom: 1em;
    }
    .headerTop{
        padding: 1em 1em 1em 1.5em;
    }
    .headerTop > div:last-of-type span{
        margin-left: 1em;
        padding: 0.1em 0.4em 0.2em;
        border-radius: 0.3em;
    }
    .headerBtn{
        padding-left: 1em;
    }
    .headerBtn > div{
        background: url("${ctxPath}/static/weixin-img/bottomColour.png") no-repeat;
        display: inline-block;
        text-align: center;
        border-radius: 1.2em;
        overflow: hidden;
        padding: 0.2em;
    }
    .headerBtn > div > span{
        display: inline-block;
        width: 5em;
        height: 2.3em;
        background: url("${ctxPath}/static/weixin-img/topColour.png") no-repeat;
        background-size: cover;
        line-height: 2.3em;
        border-radius: 1.2em;
    }
    .weekClick{
        background: #1c2b38;
    }
    .followFooter{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
        height: 4em;
        padding: 1em 0;
        border-top: 1px solid #E5E5E5;
        text-align: center;
        background: white;
    }
    .followFooter > div:first-of-type{
        border-right: 1px solid #dddddd;
    }
    .followFooter > div > div {
        line-height: 1em;
    }
    .followFooter > div > span{
        color: #00a6c9;
    }

    /*预约视图*/
    #calendar .fc-view-container table > thead,#calendar .fc-header-toolbar{
        display: none;
    }
    ::-webkit-scrollbar{
        width: 3px;
    }
</style>
<div style="display: none">
    <input type="hidden" id="pageNumber" value="doctorFollowUp">
</div>
<div class="doctor_followUp">
    <!--头部-->
    <div class="followHeader">
        <div class="headerTop">
            <div>
                <span class="glyphicon glyphicon-menu-left" onclick="lastOne()"></span>
            </div>
            <!-- 年份 月份 -->
            <div>
                <span class="glyphicon glyphicon-menu-left" onclick="weekPre()"></span>
                <span class="month"></span>
                <span class="glyphicon glyphicon-menu-right" onclick="weekNext()"></span>
            </div>
            <div style="text-align: right;">
                <span class="glyphicon glyphicon-th-list"></span>
                <span class="week">周</span>
                <span class="glyphicon glyphicon-plus plusOne" onclick="addAppointment()"></span>
                <span class="glyphicon glyphicon-plus plusTwo" onclick="fullowDetails()" style="display: none"></span>
            </div>
        </div>
        <div class="headerDate">
            <!-- 星期 -->
            <ul class="weekdays">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days"></ul>
        </div>
        <div class="headerBtn">
            <div>
                <span class="appointment">预约</span>
                <span class="followBtn" style="background: none">随访</span>
            </div>
        </div>
    </div>
    <div id="calendar"></div>
    <!--页脚-->
    <div class="followFooter">
        <div>
            <div>全部医生</div>
            <span class="glyphicon glyphicon-triangle-top"></span>
        </div>
        <div>
            <div>全部诊室</div>
            <span class="glyphicon glyphicon-triangle-top"></span>
        </div>
    </div>
</div>

<link rel="stylesheet" href="${ctxPath}/static/modular/fullcalendar/fullcalendar.css">
<link href='${ctxPath}/static/modular/fullcalendar//fullcalendar.print.min.css' rel='stylesheet' media='print'/>
<script src="${ctxPath}/static/modular/fullcalendar/lib/moment.min.js"></script>
<script src="${ctxPath}/static/modular/fullcalendar/lib/jquery.min.js"></script>
<script src="${ctxPath}/static/modular/fullcalendar/lib/jquery-ui.min.js"></script>
<script src="${ctxPath}/static/modular/fullcalendar/fullcalendar.js"></script>
<script src="${ctxPath}/static/modular/fullcalendar/scheduler.min.js"></script>
<script src="${ctxPath}/static/modular/fullcalendar/locale/zh-cn.js"></script>
<script src="${ctxPath}/static/zepto/zepto.js"></script>

<script>
    var days = [];
    $(function(){
        var date = new Date();
        var currentYear = date.getFullYear();       // 当前年份
        var currentMonth = date.getMonth() + 1;    // 当前月份
        var currentDay = date.getDate();         // 今日日期 几号
        var currentWeek = date.getDay();// 1...6,0   // 星期几
        if (currentMonth < 10) currentMonth = "0" + currentMonth;
        if (currentDay < 10) currentDay = "0" + currentDay;
        if (currentWeek === 0) {
            currentWeek = 7
        }
        var str = currentYear + "-" + currentMonth + "-" + currentDay;
        var monthTitle = currentYear + "年" + currentMonth + "月";
        $(".month").html(monthTitle);
        for (var i = currentWeek - 1; i >= 0; i -= 1) {
            var d = new Date(str);
            d.setDate(d.getDate() - i);
            days.push(d)
        }
        for (var w = 1; w <= 7 - currentWeek; w += 1) {
            var s = new Date(str);
            s.setDate(s.getDate() + w);
            days.push(s)
        }
        var li = '';
        for(var e = 0 ; e < days.length ; e++){
            var time = new Date();
            if(time.getDate() == days[e].getDate()){
                li = '<li style="color: red">'+days[e].getDate()+'</li>';
            }else {
                li = '<li>'+days[e].getDate()+'</li>';
            }
            $(".days").append(li);
        }
    });

    //  上个星期
    weekPre = function() {
        $(".days").html("");
        var d = days[0]  ;  // 如果当期日期是7号或者小于7号
        d.setDate(d.getDate() - 7);
        var date = new Date(d);
        var currentYear = date.getFullYear();       // 当前年份
        var currentMonth = date.getMonth() + 1;    // 当前月份
        var currentDay = date.getDate();         // 今日日期 几号
        var currentWeek = date.getDay();// 1...6,0   // 星期几
        if (currentMonth < 10) currentMonth = "0" + currentMonth;
        if (currentDay < 10) currentDay = "0" + currentDay;
        if (currentWeek === 0) {
            currentWeek = 7
        }
        var str = currentYear + "-" + currentMonth + "-" + currentDay;
        var monthTitle = currentYear + "年" + currentMonth + "月";
        $(".month").html(monthTitle);
        days.length = 0;
        for (var i = currentWeek - 1; i >= 0; i -= 1) {
            var q = new Date(str);
            q.setDate(q.getDate() - i);
            days.push(q)
        }
        for (var w = 1; w <= 7 - currentWeek; w += 1) {
            var s = new Date(str);
            s.setDate(s.getDate() + w);
            days.push(s)
        }
        var li = '';
        for(var e = 0 ; e < days.length ; e++){
            var time = new Date();
            if(time.getDate() == days[e].getDate()){
                li = '<li style="color: red">'+days[e].getDate()+'</li>';
            }else {
                li = '<li>'+days[e].getDate()+'</li>';
            }
            $(".days").append(li);
        }
    };

    //  下个星期
    weekNext = function() {
        $(".days").html("");
        var d = days[6];    // 如果当期日期是7号或者小于7号
        d.setDate(d.getDate() + 7);
        var date = new Date(d);
        var currentYear = date.getFullYear();       // 当前年份
        var currentMonth = date.getMonth() + 1;    // 当前月份
        var currentDay = date.getDate();         // 今日日期 几号
        var currentWeek = date.getDay();// 1...6,0   // 星期几
        if (currentMonth < 10) currentMonth = "0" + currentMonth;
        if (currentDay < 10) currentDay = "0" + currentDay;
        if (currentWeek === 0) {
            currentWeek = 7
        }
        var str = currentYear + "-" + currentMonth + "-" + currentDay;
        var monthTitle = currentYear + "年" + currentMonth + "月";
        $(".month").html(monthTitle);
        days.length = 0;
        for (var i = currentWeek - 1; i >= 0; i -= 1) {
            var q = new Date(str);
            q.setDate(q.getDate() - i);
            days.push(q)
        }
        for (var w = 1; w <= 7 - currentWeek; w += 1) {
            var s = new Date(str);
            s.setDate(s.getDate() + w);
            days.push(s)
        }
        var li = '';
        for(var e = 0 ; e < days.length ; e++){
            var time = new Date();
            if(time.getDate() == days[e].getDate()){
                li = '<li style="color: red">'+days[e].getDate()+'</li>';
            }else {
                li = '<li>'+days[e].getDate()+'</li>';
            }
            $(".days").append(li);
        }
    };

    //点击周
    $(".week").click(function () {
        if($(".week").hasClass('weekClick')){
            $(".glyphicon-th-list").show();
            $(".week").removeClass('weekClick')
        }else {
            $(".glyphicon-th-list").hide();
            $(".week").addClass('weekClick')
        }
    });

    //点击随访
    $(".followBtn").click(function () {
        $('.followBtn').css("background","url(\"${ctxPath}/static/weixin-img/topColour.png\") no-repeat");
        $('.appointment').css("background","none");
        $(".week,.plusOne,.glyphicon-th-list").hide();
        $(".plusTwo").show();
    });

    //点击预约
    $(".appointment").click(function () {
        $('.appointment').css("background","url(\"${ctxPath}/static/weixin-img/topColour.png\") no-repeat");
        $('.followBtn').css("background","none");
        $(".glyphicon-th-list,.week,.plusOne").show();
        $(".plusTwo").hide();
    });

    lastOne = function () {
        window.location.href = "${ctxPath}/index";
    };

    //为预约状态时点击 + 号
    addAppointment = function () {
        var pageNumber = $("#pageNumber").val(); //预约页标识
        window.location.href = "${ctxPath}/doctorLooked/doctor_addAppointment/" + pageNumber;
    };
    //为随访状态时点击 + 号
    fullowDetails = function () {
        var pageNumber = $("#pageNumber").val(); //预约页标识
        window.location.href = "${ctxPath}/doctorLooked/doctor_fullowDetails/" + pageNumber;
    }


    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: '',
            right: ''
        },
        defaultView: 'agendaDay',
        allDaySlot: false,
        navLinks: true,
        selectable: true,
        selectHelper: true,
        editable: true,
        eventLimit: true,
        handleWindowResize:true,
        nowIndicator: true,
        minTime: "09:00:00",
        maxTime: "18:00:00",
        slotDuration: "00:30:00",
        selectMinDistance: 30,
        timeFormat: 'H:mm',
        slotEventOverlap: false,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        dragRevertDuration: 200,
        unselectAuto: false,
        groupByResource: false,
        height:window.innerHeight-158,
        slotLabelFormat: 'HH:mm',
        slotLabelInterval: "00:30:00"
    });

</script>
@}
